<template>
  <div class="containers">
    <div class="logo">
      <div class="logo-title">
        <img :src="logoImg" width="45" class="logo-img" />
        <div class="logo-title-txt">支撑平台</div>
      </div>
      <div class="logo-login">
        <div class="logo-tab">
          <div class="logo-tab-title">登录</div>
        </div>
        <a-form
          @finish="onFinish"
          @finishFailed="onFinishFailed"
          ref="formRef"
          :model="formState"
          name="basic"
          :wrapper-col="{ span: 23 }"
          autocomplete="off"
          :rules="rules"
        >
          <a-form-item name="username">
            <a-input v-model:value="formState.username" placeholder="用户名">
              <template #prefix>
                <UserOutlined style="color: #1677ff" />
              </template>
            </a-input>
          </a-form-item>

          <a-form-item name="userpwd">
            <a-input-password v-model:value="formState.userpwd" placeholder="密码">
              <template #prefix>
                <LockOutlined style="color: #1677ff" />
              </template>
            </a-input-password>
          </a-form-item>
          <a-form-item class="keyword-box" name="keyword" :wrapper-col="{ span: 14 }">
            <a-input v-model:value="formState.keyword" placeholder="验证码">
              <!-- <template #prefix><span :style="{ color: 'rgba(0, 0, 0, 0.3)', marginLeft: '5px' }"> 验证码</span></template> -->
            </a-input>
            <div class="keyword-img-box">123</div>
          </a-form-item>

          <a-form-item class="keyword-box" name="remember" :wrapper-col="{ offset: 0, span: 16 }">
            <a-checkbox v-model:checked="rember">记住我</a-checkbox>
            <div class="forget-box"> 忘记密码 </div>
          </a-form-item>

          <a-form-item :wrapper-col="{ offset: 0, span: 16 }">
            <a-button size="large" type="primary" html-type="submit" @click="login">{{ $t('login.login') }}</a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
  // import logo from '@/assets/icons/svg/logo.svg';
  import * as utils from '../../utils/index';
  import { useZhichengStore } from '../../store/index';
  import { useI18n } from 'vue-i18n';
  const { t } = useI18n();
  console.log(t('login.userName'));

  const logoImg = new URL('../../assets/images/zhicheng/8f6a59aa-bb2c-435b-baa8-6b885dee3505.png', import.meta.url).href;
  // const logoImg = ref('../../assets/images/zhicheng/8f6a59aa-bb2c-435b-baa8-6b885dee3505.png');

  const store = useZhichengStore();
  console.log(123, store.showAlertInfo.isShow);

  const formState = reactive({
    username: '',
    userpwd: '',
    keyword: '',
  });
  const formRef = ref();
  const validatePass = async (_rule, value) => {
    if (value === '') {
      return Promise.reject('请输入用户名！');
    } else {
      if (formState.username !== '') {
        formRef.value.validateFields('checkPass');
      }
      return Promise.resolve();
    }
  };
  const validatePass1 = async (_rule, value) => {
    if (value === '') {
      return Promise.reject('请输入密码！');
    } else {
      if (formState.userpwd !== '') {
        // formRef.value.validateFields('checkPass');
        const regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[~!@#$%^&*\.?])[A-Za-z\d~!@#$%^&*\.?]{8,}/;
        if (!regex.test(formState.userpwd)) {
          return Promise.reject('请输入正确的格式！');
        }
      }
      return Promise.resolve();
    }
  };
  const validatePass2 = async (_rule, value) => {
    if (value === '') {
      return Promise.reject('请输入验证码！');
    } else {
      if (formState.username !== '') {
        formRef.value.validateFields('checkPass');
      }
      return Promise.resolve();
    }
  };
  const rules = {
    username: [
      {
        required: true,
        validator: validatePass,
        trigger: 'change',
      },
    ],
    userpwd: [
      {
        required: true,
        validator: validatePass1,
        trigger: 'change',
      },
    ],
    keyword: [
      {
        required: true,
        validator: validatePass2,
        trigger: 'change',
      },
    ],
  };

  // 记录密码
  const rember = ref(false);

  // 提交
  const valided = ref(null);

  const login = async (val) => {
    console.log(valided.value);

    try {
      let values = await formRef.value.validateFields();
      utils.showAlert(val, '911');
      if (rember.value == true) {
        utils.SessionStorage.set('username', formState.username);
        utils.SessionStorage.set('userpwd', formState.userpwd);
      } else {
        utils.SessionStorage.remove('username');
        utils.SessionStorage.remove('userpwd');
      }
    } catch (errorInfo) {
      console.log('Failed:', errorInfo);
    }
  };
</script>

<style lang="less" scoped>
  .containers {
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;

    .logo {
      width: 550px;
      height: 550px;

      font-style: 40px;
      display: flex;
      align-items: center;
      flex-direction: column;
      background-color: rgb(238, 240, 244);
      border: 1px solid pink;

      .logo-title {
        height: 80px;
        display: flex;
        justify-content: center;
        align-items: start;
        margin-left: -50px;

        .logo-img {
          line-height: 40px;
          margin-top: 17px;
        }

        .logo-title-txt {
          line-height: 80px;
          font-size: 30px;
          font-weight: 800;
        }
      }

      .logo-login {
        width: 350px;
        height: 100%;

        .keyword-box {
          position: relative;
        }
        .forget-box {
          position: absolute;
          top: 3px;
          right: -120px;
          color: #1677ff;
          cursor: pointer;
        }
        .keyword-img-box {
          position: absolute;
          background: pink;
          width: 132px;
          height: 32px;
          top: 0;
          right: -132px;
        }

        .logo-tab {
          width: 350px;
          height: 40px;
          background-color: #fff;
          border-bottom: 1px solid rgb(236, 238, 242);
          margin-bottom: 25px;
          background-color: rgb(238, 240, 244);
        }

        .logo-tab-title {
          height: 30px;
          width: 35px;
          border-bottom: 3px solid #1677ff;
          color: #1677ff;
        }
        .ant-btn-primary {
          width: 100px;
        }
      }
    }
  }
</style>
